<template>
  <div>
    <div class="left-search">
      <div class="search-title">库存数据</div>
    </div>
    <div ref="echartsRef" class="earchs"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, markRaw, onUnmounted } from 'vue';

const myEcharts = ref<any>();
const echartsRef = ref<any>();
const initEcharts = () => {
  myEcharts.value = markRaw(echarts.init(echartsRef.value));
  const options: any = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      type: 'plain',
      icon: 'rect',
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
        fontSize: 10,
        lineHeight: 10,
      },
      // left: '10px',
    },
    grid: {
      left: '10px',
      right: '10px',
      bottom: '0px',
      top: '30px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '再生产',
        type: 'bar',
        stack: 'total',
        barWidth: '40%',
        data: [320, 302, 301, 334, 390, 330, 320],
      },
      {
        name: '在库',
        type: 'bar',
        stack: 'total',
        barWidth: '40%',
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '库容车',
        type: 'bar',
        stack: 'total',
        barWidth: '40%',
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: '订单车',
        type: 'bar',
        stack: 'total',
        barWidth: '40%',
        data: [150, 212, 201, 154, 190, 330, 410],
      },
    ],
  };
  myEcharts.value.setOption(options);
};

const handleResize = () => {
  if (myEcharts.value) {
    myEcharts.value.resize();
  }
};

onMounted(() => {
  initEcharts();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="scss">
.left-search {
  height: 30px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .search-title {
    line-height: 30px;
  }
}
.earchs {
  flex: 1;
  box-sizing: border-box;
}
</style>
